<template>
    <z-paging>
        <headsty :mrbot="'75'" :leftImg="'https://morgan.dingxians.cn/static/userpic/userhead.png'"></headsty>
        <view class="header_box">
            <template v-if="is_login">
                <view class="left_head_box">
                    <view class="left_zs_head_box">
                        <image :src="userInfo.avatar" mode="scaleToFill" />
                        <view class="touxiangkuang_box" v-if="userInfo.level_id > 0">
                            <image
                                :src="'https://morgan.dingxians.cn/static/txk/' + (userInfo.level_id >= 1 && userInfo.level_id <= 4 ? '1_4' : userInfo.level_id >= 5 && userInfo.level_id <= 8 ? '5_8' : userInfo.level_id >= 9 && userInfo.level_id <= 12 ? '9_12' : userInfo.level_id >= 13 && userInfo.level_id <= 16 ? '13_16' : '17_20') + '.png'"
                                mode="widthFix" />
                        </view>
                    </view>

                    <view class="head_scenter_box">
                        <view class="head_topname_box">
                            <view class="left_namezs_box">{{ userInfo.nickname }}</view>
                            <view class="level_user_id_box">
                                <image
                                    :src="'https://morgan.dingxians.cn/static/user_levelid/' + userInfo.level_id + '.png'"
                                    mode="heightFix" />
                            </view>
                        </view>
                        <view class="user_ids_box">
                            <view class="user_id_zs_box">ID：{{ userInfo.id }}</view>
                            <view class="copy_box" @click="copy(userInfo.id)">
                                <image src="https://morgan.dingxians.cn/static/userpic/copy.png" mode="scaleToFill" />
                            </view>
                        </view>
                    </view>
                </view>

                <view class="bjzl_box" @click="$router('/userPage/edit/edit')">编辑资料</view>
            </template>
            <template v-else>
                <view class="left_head_box" @click="goLogin">
                    <view class="left_zs_head_box">
                        <image src="https://www.dingxians.cn/upload/images/user/avatar.png" mode="scaleToFill" />
                    </view>
                    <view class="head_scenter_box">
                        <view class="head_topname_box">
                            <view class="left_namezs_box1">登录/注册</view>
                        </view>
                    </view>
                </view>
            </template>
        </view>
        <view class="shuzi_box">
            <view class="dange_shuzi_box" @click="$router('/userPage/balance/balance')">
                <view class="top_num_s">{{ userInfo.balance || '0.00' }}</view>
                <view class="bot_text_s">元素</view>
            </view>
            <view class="dange_shuzi_box">
                <view class="top_num_s">{{ userInfo.point || '0.00' }}</view>
                <view class="bot_text_s">钻石</view>
            </view>
            <view class="dange_shuzi_box" @click="$router('/userPage/copup/copup')">
                <view class="top_num_s">{{ userInfo.coupon_count || 0 }}</view>
                <view class="bot_text_s">优惠券</view>
            </view>
            <!-- <view class="dange_shuzi_box">
                <view class="top_num_s">100</view>
                <view class="bot_text_s">收藏</view>
            </view> -->
        </view>

        <view class="qiaqnao_box" @click="$router('/userPage/balance/balance')"
            style="background-image: url('https://morgan.dingxians.cn/static/userpic/12.png');">
            <view class="yuebox">{{ userInfo.balance || '0.00' }}</view>
            <view class="chakanxingqiang_box" @click.stop="$router('/userPage/bill/bill')">查看详情</view>
        </view>

        <view class="zhuyaogongneng_box">
            <view class="dange_gongneng_box" @click="gn(item)" v-for="(item, index) in mainFun" :key="index">
                <view class="top_img_box">
                    <image :src="item.img" mode="heightFix" />
                </view>
                <view class="text_bot_gn_box">{{ item.text }}</view>
            </view>
        </view>

        <view class="two_btn_box">
            <!-- $router('/userPage/ranking/flow') -->
            <view class="left_lsph_box" @click="$router('/userPage/ranking/flow')">
                <image src="https://morgan.dingxians.cn/static/userpic/lsph.png" mode="scaleToFill" />
            </view>
            <view class="left_lsph_box" @click="$router('/userPage/ranking/avtiver')">
                <image src="https://morgan.dingxians.cn/static/userpic/hdzx.png" mode="scaleToFill" />
            </view>
        </view>

        <view class="qitagn_box">
            <view class="biqoati_box">其他功能</view>
            <view class="quanbu_dange_box">
                <view class="dabfgeqtgn_box" v-if="!is_login || userInfo.is_show == 1" v-for="(item, index) in otherFun"
                    :key="index" @click="gonext(item)">
                    <view class="top_qt_img_box">
                        <image :src="item.img" mode="heightFix" />
                    </view>
                    <view class="bot_qt_text_box">{{ item.text }}</view>
                </view>
                <view class="dabfgeqtgn_box" v-else v-for="(item, index) in otherFun" :key="index"
                    @click="gonext(item)">
                    <view class="top_qt_img_box">
                        <image :src="item.img" mode="heightFix" />
                    </view>
                    <view class="bot_qt_text_box">{{ item.text }}</view>
                </view>
                <view style="width: 25%;" v-for="iten in 3"></view>
            </view>
        </view>
        <u-modal :show="showModal" :showCancelButton="true" title="绑定" @cancel="showModal = false"
            @confirm="confirmAction">
            <!-- 输入框 -->
            <u-input v-model="inputValue" type="text" placeholder="请输入内容" />
        </u-modal>
        <u-popup :show="pupShow" mode="center">
            <view class="popuphuodong">
                <image mode="widthFix" class="pop_image" :src="erImg"></image>
                <image class="close_pop" @click.stop="pupShow = false"
                    src="https://morgan.dingxians.cn/static/bonusgive/4.png">
                </image>
            </view>

        </u-popup>
    </z-paging>
</template>
<script>
import headsty from '../../components/indexhead.vue'

export default {
    components: {
        headsty
    },
    data() {
        return {
            pupShow: false,//客服弹窗
            is_login: false,//是否登录
            mainFun: [//主要功能
                {
                    id: 1,
                    text: '全部订单',
                    img: 'https://morgan.dingxians.cn/static/userpic/1.png',
                    url: '/userPage/order/order?status=' + 0
                },
                {
                    id: 2,
                    text: '收货地址',
                    img: 'https://morgan.dingxians.cn/static/userpic/2.png',
                    url: '/userPage/address/address'
                },
                {
                    id: 3,
                    text: '已完成',
                    img: 'https://morgan.dingxians.cn/static/userpic/3.png',
                    url: '/userPage/order/order?status=' + 4
                },
                {
                    id: 4,
                    text: '客服',
                    img: 'https://morgan.dingxians.cn/static/userpic/4.png'
                },
            ],
            // 其他功能
            otherFun: [
                {
                    id: 1,
                    text: '福利屋',
                    img: 'https://morgan.dingxians.cn/static/userpic/11.png',
                    url: '/userPage/fuyuri/fuyuri'
                },
                {
                    id: 2,
                    text: '会员中心',
                    img: 'https://morgan.dingxians.cn/static/userpic/5.png',
                    url: '/userPage/insider/insider'
                },
                {
                    id: 3,
                    text: '我的账单',
                    img: 'https://morgan.dingxians.cn/static/userpic/8.png',
                    url: '/userPage/bill/bill'
                },
                {
                    id: 4,
                    text: '幸运抽奖',
                    img: 'https://morgan.dingxians.cn/static/userpic/6.png',
                    url: '/userPage/luckydraw/lottery'
                },
                {
                    id: 5,
                    text: '邀请好友',
                    img: 'https://morgan.dingxians.cn/static/userpic/7.png',
                    url: '/userPage/invited/invited'
                },
                // {
                //     id: 8,
                //     text: '绑定',
                //     img: 'https://morgan.dingxians.cn/static/userpic/7.png',
                // },

                {
                    id: 6,
                    text: '消费送福利',
                    img: 'https://morgan.dingxians.cn/static/userpic/10.png',
                    url: '/userPage/through/through'
                },
                {
                    id: 7,
                    text: '退出登录',
                    img: 'https://morgan.dingxians.cn/static/userpic/9.png'
                }
            ],
            otherFun1: [
                {
                    id: 1,
                    text: '福利屋',
                    img: 'https://morgan.dingxians.cn/static/userpic/11.png',
                    url: '/userPage/fuyuri/fuyuri'
                },
                {
                    id: 2,
                    text: '会员中心',
                    img: 'https://morgan.dingxians.cn/static/userpic/5.png',
                    url: '/userPage/insider/insider'
                },
                {
                    id: 3,
                    text: '我的账单',
                    img: 'https://morgan.dingxians.cn/static/userpic/8.png',
                    url: '/userPage/bill/bill'
                },
                {
                    id: 4,
                    text: '幸运抽奖',
                    img: 'https://morgan.dingxians.cn/static/userpic/6.png',
                    url: '/userPage/luckydraw/lottery'
                },
                {
                    id: 5,
                    text: '邀请好友',
                    img: 'https://morgan.dingxians.cn/static/userpic/7.png',
                    url: '/userPage/invited/invited'
                },
                {
                    id: 8,
                    text: '绑定',
                    img: 'https://morgan.dingxians.cn/static/userpic/7.png',
                },
                {
                    id: 6,
                    text: '消费送福利',
                    img: 'https://morgan.dingxians.cn/static/userpic/10.png',
                    url: '/userPage/through/through'
                },
                {
                    id: 7,
                    text: '退出登录',
                    img: 'https://morgan.dingxians.cn/static/userpic/9.png'
                }
            ],
            userInfo: {},
            inputValue: '',
            showModal: false,
            erImg: '',
        }
    },
    onShow() {
        if (uni.getStorageSync('token')) {
            this.getInfo()
            this.is_login = true
        } else {
            this.is_login = false
            this.userInfo = {}
        }
    },
    methods: {
        gn(item) {
            if (item.id != 4) {
                this.$router(item.url)
            } else {
                this.$Request.get(this.$api.user.settings).then(res => {
                    this.erImg = res.data.customer
                    this.pupShow = true
                    console.log(this.pupShow)
                })
            }
        },
        copy(value) {
            uni.setClipboardData({
                data: value.toString(),
                success: () => {
                    this.$msg('复制成功')
                },
                fail: () => { },
            })
        },
        gonext(item) {
            if (item.id == 7) {
                this.outlogin()
            } else if (item.id == 8) {
                if (this.userInfo.parent_id) {
                    this.$msg('已绑定ID为' + this.userInfo.parent_id + '的用户')
                } else {
                    let that = this
                    // #ifndef MP-ALIPAY
                    uni.showModal({
                        title: '绑定',
                        editable: true,
                        placeholderText: '请输入id',
                        success: function (res) {
                            if (res.confirm) {
                                console.log(res)
                                that.bind(res.content)
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    // #endif
                    // #ifdef MP-ALIPAY
                    that.showModal = true
                    // #endif
                }

            } else {
                this.$router(item.url)
            }
        },
        confirmAction() {
            this.bind(this.inputValue)
        },
        goLogin() {
            // #ifdef MP-WEIXIN
            this.$router('/userPage/login/loginCheck')
            // #endif
            // #ifdef MP-ALIPAY
            this.$router('/userPage/login/login')
            // #endif
        },
        bind(bindID) {
            let data = {
                code: bindID
            }
            this.$Request.post(this.$api.user.usersBind, data).then(res => {
                this.showModal = false
                if (res.code == 200) {
                    this.$msg('绑定成功')
                    setTimeout(() => {
                        this.getInfo()
                    }, 600);
                }
            })
        },
        getInfo() {
            this.$Request.get(this.$api.user.users).then(res => {
                if (res.code == 200) {
                    this.userInfo = res.data
                    uni.setStorageSync('userInfo', res.data)
                    console.log('用户信息', this.userInfo)
                }
            })
        },
        outlogin() {
            let that = this
            uni.showModal({
                title: "确定退出？",
                success: function (res) {
                    if (res.confirm) {
                        that.$Request.post(that.$api.logins.usersLogout).then(res => {
                            if (res.code == 200) {
                                that.$msg(res.msg)
                                uni.setStorageSync('token', '')
                                uni.switchTab({
                                    url: '/pages/index/index'
                                })
                            }
                        })
                    } else {
                        console.log('取消')
                    }
                }
            })

        },

    }
}
</script>
<style lang="scss" scoped>
.header_box {
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30rpx;
    margin-bottom: 66rpx;
    position: relative;

    .left_head_box {
        display: flex;
        justify-content: flex-start;

        .left_zs_head_box {
            width: 120rpx;
            height: 120rpx;
            // background-color: #fff;
            position: relative;
            margin-right: 21rpx;

            .touxiangkuang_box {
                position: absolute;
                left: -23rpx;
                top: -20rpx;
                width: 126rpx;

                image {
                    width: 156rpx;
                }
            }

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .head_scenter_box {
            height: 120rpx;
            box-sizing: border-box;
            padding-top: 22rpx;
            // background-color: #fff;

            .head_topname_box {
                height: 40rpx;
                display: flex;
                justify-content: flex-start;
                margin-bottom: 22rpx;

                .left_namezs_box {
                    width: 147rpx;
                    height: 40rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    line-height: 40rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 10rpx;
                }

                .left_namezs_box1 {
                    height: 80rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    line-height: 80rpx;
                }

                .level_user_id_box {
                    height: 39rpx;

                    image {
                        height: 100%;
                    }
                }
            }

            .user_ids_box {
                height: 30rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .user_id_zs_box {
                    height: 30rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    line-height: 30rpx;
                    margin-right: 20rpx;
                }

                .copy_box {
                    height: 25rpx;
                    width: 25rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    image {
                        height: 100%;
                        width: 100%;
                    }
                }
            }
        }
    }

    .bjzl_box {
        width: 180rpx;
        height: 50rpx;
        background: #501414;
        border-radius: 25rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FF4545;
        line-height: 50rpx;
        text-align: center;
        position: absolute;
        right: 20rpx;
    }
}

.shuzi_box {
    width: 100%;
    height: 76rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;

    .dange_shuzi_box {
        width: 25%;
        height: 100%;

        .top_num_s {
            width: 100%;
            height: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 42rpx;
            color: #FFFFFF;
            line-height: 32rpx;
            text-align: center;
            margin-bottom: 20rpx;
        }

        .bot_text_s {
            width: 100%;
            text-align: center;
            height: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 24rpx;
        }
    }
}

.qiaqnao_box {
    width: 694rpx;
    height: 231rpx;
    margin: auto;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 63rpx;

    .yuebox {
        height: 49rpx;
        font-family: text1;
        font-weight: bold;
        font-size: 67rpx;
        color: #FFFFFF;
        line-height: 49rpx;
        font-style: italic;
        position: absolute;
        bottom: 29rpx;
        left: 40rpx;
    }

    .chakanxingqiang_box {
        position: absolute;
        width: 103rpx;
        height: 36rpx;
        background: #501414;
        border-radius: 18rpx;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 20rpx;
        color: #FF4545;
        line-height: 36rpx;
        left: 242rpx;
        top: 98rpx;
    }
}

.zhuyaogongneng_box {
    width: 694rpx;
    height: 120rpx;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 49rpx;

    .dange_gongneng_box {
        width: 25%;
        height: 120rpx;

        .top_img_box {
            width: 80rpx;
            height: 78rpx;
            margin: auto;
            margin-bottom: 19rpx;

            image {
                height: 100%;
            }
        }
    }

    .text_bot_gn_box {
        width: 100%;
        height: 23rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 23rpx;
        text-align: center;
    }
}

.two_btn_box {
    width: 694rpx;
    height: 103rpx;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 21rpx;

    .left_lsph_box {
        width: 320rpx;
        height: 103rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.qitagn_box {
    width: 690rpx;
    box-sizing: border-box;
    padding-top: 39rpx;
    margin: auto;

    .biqoati_box {
        height: 27rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 27rpx;
        box-sizing: border-box;
        padding-left: 29rpx;
        margin-bottom: 39rpx;
    }

    .quanbu_dange_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .dabfgeqtgn_box {
            width: 25%;
            height: 94rpx;
            margin-bottom: 48rpx;

            .top_qt_img_box {
                width: 45rpx;
                height: 45rpx;
                margin: auto;
                margin-bottom: 26rpx;

                image {
                    // width: 100%;
                    height: 100%;
                }
            }

            .bot_qt_text_box {
                width: 100%;
                height: 23rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 23rpx;
                text-align: center;
            }
        }
    }

}

.popuphuodong {
    z-index: 1000;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: transparent;

    .pop_image {
        width: 600rpx;
    }

    .close_pop {
        width: 80rpx;
        height: 80rpx;
        position: absolute;
        bottom: -100rpx;
        left: 270rpx;

    }
}
</style>